<template>
	<!-- 购物车页面 -->
	<view class="cart">
		<!-- 商品列表 -->

		<view class="listCart" v-for="(item,index) in  items" :key="item.id">
			<view class="cartList">
				<evan-checkbox v-model="item.isChecked"></evan-checkbox>
				<image :src="item.productPic" mode=""></image>
				<view class="list">
					<text>{{item.productName}}</text>
					<text>编号: {{item.productId}}</text>
					<text>价格: ￥{{item.price}}</text>
					<text>数量: {{item.quantity}}</text>
				</view>
			</view>
			<view class="num">
				<text @tap="clearNum(item.id)">-</text>
				<input type="text" value="" v-model="item.quantity" />
				<text @tap="addNum(item.id)">+</text>
			</view>
		</view>
		<!-- 底部合计 -->
		<view class="btm">
			<view class="left">
				<text>全选</text>
				<evan-checkbox v-model="isAllchecked"></evan-checkbox>
			</view>
			<view class="right">
				合计: ￥<text>{{totalPrice}}</text> 元
				<view class="btn" @tap="addOrder">
					结算
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findAllCartItem,
		delCartItems
	} from "@/api/user/car/index.js"
	import {
		addPreOrder
	} from "@/api/kind/info/index.js"
	import mix from "../../../mixins/index.js"
	export default {
			mixins: [mix],
		data() {
			return {
				id:"",
				items:[], //获取到的列表
			};
		},
		onLoad() {
			
		},
		onShow() {
			if(this.checkLogin()){
				findAllCartItem()
				.then(res=>{
					console.log("我是购物车列表",res);
					// 为每一项数据添加属性
					res.data.items.forEach(el => {
						el.isChecked = false
					})
					this.items = res.data.items
					console.log(this.items);
					
				})
			}
			
		},
		computed:{
			// 全选和反选
			isAllchecked:{
				get(){
					return this.items.every(el=>el.isChecked)
				},
				set(val){
					this.items.forEach(el=>{
						el.isChecked = val
					})
				}
			},
			//商品总价
			totalPrice(){
				return this.items.reduce((totry,current)=>{
					if(current.isChecked){
						return totry + current.quantity * current.price
					}else{
						return totry
					}
				},0)
			}
		},
		methods:{
			//点击加加
			addNum(avl){
				let index = this.items.findIndex(el=>el.id == avl);
				this.items[index].quantity++
			},
			//点击减减
			clearNum(avl){
				var arr = []
				//查找items里面的第几个用下标来判断
				let index = this.items.findIndex(el=>el.id == avl)
				
				let list = this.items.find(el => el.id == avl)
				var id = list.id
				arr.push(id)
				
				if( this.items[index].quantity <= 1){
					uni.showModal({
						title: '删除提示',
						content: '确实删除此商品吗',
						success(res) {
							console.log(res);
							// 判断res.confirm为true就是点击确定就是要执行删除操作
							if(res.confirm){
								delCartItems(arr).then(res1=>{
									console.log(res1);
									// 再次判断是否删除成功 重新跳到自家的界面就等于刷新一下
									if( res1.success ){
										uni.navigateTo({
											url:"../car/car"
										})
									}
								})
							}
							
						}
					})
					
				}else{
					this.items[index].quantity--
				}
				
			},
			
			//点击结算 生成确认单
			addOrder(){
				var _this = this
				var obj = {
					  "orderItemList": []			
				}
				// 获取到选中的商品
				 var list = this.items.filter(el => el.isChecked);
				 list.forEach( ele => {
					 var obj1 = {
						 cartId: ele.id,
						 productId: ele.productId,
						 productQuantity: ele.quantity,
						 productSkuId: ele.productSkuId
					 }
					 obj.orderItemList.push(obj1)
				 })
				 // 生成订单号 
				addPreOrder(obj)
				.then(res =>{
					_this.id = res.data.orderId
					console.log("生成订单号",res);
					// console.log(this.id);
					// console.log(_this.id);
					// 判断是否生成订单号
					if(res.success){
						uni.showToast({
							title:"结算成功1秒后跳转到订单页"
						})
						// 倒计时跳转
						setTimeout(function(){
							uni.navigateTo({
								url:`../../selectAddress/selectAddress?id=${_this.id}`
							})
						},1000)
					}else{
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
					
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.cart {
		// width:90%;
		margin: 0 auto;
		overflow: hidden;
	
		.listCart {
			// 购物车列表
			width: 85%;
			margin: 0 auto;
			height: auto;
			background-color: #fff;
			padding: 20rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
	
			.cartList {
				display: flex;
				align-items: center;
	
				image {
					margin-left: 20rpx;
					width: 120rpx;
					height: 120rpx;
				}
	
				.list {
					display: flex;
					flex-direction: column;
					font-size: 24rpx;
					margin-left: 20rpx;
	
					text {
						color: #8d8d8d;
					}
	
					text:nth-child(1) {
						color: #333;
					}
				}
			}
	
			.num {
				display: flex;
				justify-content: flex-end;
				align-items: center;
	
				text {
					display: block;
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 30rpx;
					text-align: center;
					border-radius: 50%;
					background: #f1ece7;
					margin-right: 20rpx;
				}
	
				input {
					width: 80rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 30rpx;
					background-color: #f1ece7;
					text-align: center;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}
			}
	
		}
	
		.btm {
			width: 100%;
	
			position: fixed;
			bottom: 0px;
			nav-left: 0px;
			background-color: #fff;
			padding: 30rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
	
			.left {
				display: flex;
	
				text {
					margin-right: 23rpx;
					margin-left: -36rpx;
				}
			}
	
			.right {
				display: flex;
				align-items: center;
	
				text {
					color: #f00;
				}
	
				.btn {
					margin-left: 20rpx;
					padding: 20rpx 60rpx;
					background-color: #354e44;
					color: #fff;
					border-radius: 10rpx;
				}
			}
		}
	}

</style>
